<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head>
    <title>学习统计</title>
    <div data-th-replace="layout/head"></div>
    <style>
        canvas {-moz-user-select: none;-webkit-user-select: none;}
    </style>
</head>
<body>
<header class="bar bar-nav bar-unLine">
    <a class="button button-link button-nav pull-left goBack" href="javascript:window.history.go(-1);">
        <span class="iconfont icon-fanhui"></span>
    </a>
    <h1 class='title'>学习统计</h1>
</header>
<!--主体区域 开始-->
<div class="content wm-content ovf">
    <article>
        <div id="page-city-picker">
            <div class="buttons-tab wm-buttons-tab b-tab-picker">
                <a href="javascript:void(0)"  class="button active">
                    <input placeholder="周" id="week-picker" value="周" readonly="" type="text" class="fs7 c-333 data-picker">
                </a>

                <a href="javascript:void(0)" class="button">
                    <input placeholder="月" id="monthes-picker" value="月" readonly="" type="text" class="fs7 c-333 data-picker">
                </a>
                <a href="javascript:void(0)" class="button">
                    <input placeholder="年" id="years-picker" readonly="" value="年" type="text" class="fs7 c-333 data-picker">
                </a>
            </div>
        </div>
        <div class="page-infinite__wrap courses-list-page__wrap">
            <div class="page-group">
                <div class="page page-current" id="page-infinite-scroll-bottom">
                    <div class="content infinite-scroll native-scroll" data-type="native" data-distance="100">
                        <div class="pl75 pr75 mt5 mb5">
                            <div class="pt5 pb5">
                                <section>
                                    <section>
                                        <span id="learDataTips">
                                            <span class="fs4 c-888">学习时长</span>
                                        </span>
                                    </section>
                                    <section>
                                        <strong style="font-size: 1rem;" id="duration">0</strong>
                                        <strong class="fs7">分钟</strong>
                                    </section>
                                    <section class="mt5 fs4 c-888">
                                        <span class="vam" id="startTime">----年--月--日</span>
                                        <span class="vam"> 至 </span>
                                        <span class="vam" id="endTime">--月--日</span>
                                    </section>
                                </section>

                                <section class="mt5 pt5">
                                    <canvas id="studyLineCanvas"></canvas>
                                </section>
                                <hr>
                                <section class="study-history-list-block">
                                    <ul class="list-block">
                                        <li>
                                            <div class="item-content">
                                                <div class="item-inner">
                                                    <div class="item-title label">
                                                        <span class="fs7">学习天数</span>
                                                    </div>
                                                    <div class="item-input text-right">
                                                        <strong class="fs8" id="learnDayNum">0</strong>
                                                        <span class="fs6">天</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="item-content">
                                                <div class="item-inner">
                                                    <div class="item-title label">
                                                        <span class="fs7">完成试卷</span>
                                                    </div>
                                                    <div class="item-input text-right">
                                                        <strong class="fs8" id="examRecordCount">0</strong>
                                                        <span class="fs6">套</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="item-content">
                                                <div class="item-inner">
                                                    <div class="item-title label">
                                                        <span class="fs7">签到数</span>
                                                    </div>
                                                    <div class="item-input text-right">
                                                        <strong class="fs8" id="signIn">0</strong>
                                                        <span class="fs6">天</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </section>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </article>
</div>

<!--主体区域 结束-->
<div data-th-replace="layout/footer"></div>
<script type="text/javascript" th:src='@{{path}/front/mobile/business/user/center/learning/learningTrend.js?v={v}(path=${staticPath}, v=${v})}' charset="utf-8"></script>
<script type="text/javascript" th:src='@{{path}/common/mChart/Chart.min.js?v={v}(path=${staticPath}, v=${v})}' charset="utf-8"></script>
<script type="text/javascript" th:src='@{{path}/front/mobile/business/user/center/learning/studyLine.js?v={v}(path=${staticPath}, v=${v})}' charset="utf-8"></script>
<script th:inline="javascript">

    var dateData= [[${dateData}]]
</script>
</body>
</html>